import React, { useState, useEffect } from 'react';
import { List, ConfigProvider, Breadcrumb, message, Spin } from 'antd';
import zhCN from 'antd/lib/locale/zh_CN';
import styles from './index.less';
import type { NewsType } from '@/services/newsCenter';
import { findNewByCondition } from '@/services/newsCenter';
import { connect } from 'umi';
import { highLight } from '@/utils/util';

const NewsCenter: React.FC = (props) => {
  const { dispatch }: any = props;
  const [newData, setNewData] = useState([]);
  const initPagination = { page: 1, size: 20 };
  const [totalCount, setTotalCount] = useState(0);
  const [loading, setLoading] = useState(false);

  const getNewsList = (params: { page: number; size: number | undefined }) => {
    setLoading(true);
    findNewByCondition(params)
      .then((resp) => {
        setTotalCount(resp?.totalCount);
        setNewData(resp.results);
        setLoading(false);
      })
      .catch((error) => {
        throw error;
        setLoading(false);
      });
  };

  useEffect(() => {
    getNewsList(initPagination);
  }, []);
  const JumpHref = (news: any) => {
    try {
      highLight(dispatch, 'NewsCenter');
      window.open(`#/newsDetail?id=${news}`);
    } catch (error) {
      message.error('请联系管理员').then();
    }
  };

  return (
    <ConfigProvider locale={zhCN}>
      <div className={styles.policyLibWrapper}>
        <div className={styles.policyLibMain}>
          <div className={styles.policyLibBreadcrumb}>
            <Breadcrumb separator="">
              <Breadcrumb.Item>您的位置</Breadcrumb.Item>
              <Breadcrumb.Separator>:</Breadcrumb.Separator>
              <Breadcrumb.Item href="">首页</Breadcrumb.Item>
              <Breadcrumb.Separator />
              <Breadcrumb.Item>新闻中心</Breadcrumb.Item>
            </Breadcrumb>
          </div>
          <div className={styles.policyLibList}>
            <div className={styles.listTitle}>
              <div className={styles.listTitleLeft}>
                <div className={styles.sideShortBar}></div>
                <div className={styles.titleText}>新闻列表</div>
              </div>
            </div>
            <div className={styles.showTotalNum}>共{totalCount}条数据</div>
            <div className={styles.policyLibListContent}>
              <Spin spinning={loading}>
                <List
                  pagination={{
                    defaultPageSize: 20,
                    locale: zhCN,
                    total: totalCount,
                    showSizeChanger: true,
                    showQuickJumper: true,
                    showTotal: (total) => {
                      return `共${total}条数据`;
                    },
                    onChange: (page, pageSize) => {
                      getNewsList({ page, size: pageSize });
                    },
                  }}
                  footer={<div className={styles.listFooter}></div>}
                  bordered={false}
                  dataSource={newData}
                  renderItem={(item: NewsType) => (
                    <List.Item key={item.id}>
                      <List.Item.Meta
                        title={
                          <div className={styles.listItem}>
                            <a
                              target="_blank"
                              className={styles.listItemTitle}
                              onClick={JumpHref.bind('', item.id)}
                              title={item.title}
                            >
                              {item.title}
                            </a>
                            <div className={styles.listItemDate}>{item.publishTime}</div>
                          </div>
                        }
                      />
                    </List.Item>
                  )}
                />
              </Spin>
            </div>
          </div>
        </div>
      </div>
    </ConfigProvider>
  );
};

export default connect()(NewsCenter);
